<template>
  <div>
    <div class="wrap">
      <p class="wrap_t">人生只有 900 余月</p>
      <div class="main">
        <div>
        <canvas class="myLife" width="300px" height="300px"></canvas>
        <div style="margin:0 auto;text-align:center;color:#fff;background-color: slateblue; padding-top: 5px;">
          <span>人生倒计时</span>
          </div>
          <div style="margin:0 auto;text-align:center;color:#fff;background-color: slateblue; padding-bottom: 5px;">
            <span class="im0now"></span>
          <span style="color: #e96900; font-size: 20px">%</span>
          </div>
        </div>
        <div class="clock">
          <canvas id="canvas" width=300 height=300></canvas>
          <div style="margin:0 auto;text-align:center;color:#fff;background-color: slateblue; padding-top: 5px;" class="biaotis">
            <span>距离</span>
            <span class="zhuti">2022</span>
            <span>仅有</span>
          </div>
          <div style="margin:0 auto;text-align:center;color:#fff;background-color: slateblue; padding-bottom: 5px;" id="CountMsg" class="HotDate">
            <span id="t_d">00天</span>
            <span id="t_h">00时</span>
            <span id="t_m">00分</span>
            <span id="t_s">00秒</span>
          </div>
        </div>
      </div>
      <p class="wrap_t">
        人生的意义在于不断冲出舒适区，安逸不适合我，我想趁着有梦，豁出一切。
      </p>
    </div>
  </div>
</template>

<script>
export default {
  name: "lifecountdown",
  data() {
    return {
      begin1:true
    }
  },
  methods: {
    getRTime() {
      var EndTime = new Date("2022/01/01 00:00:00"); //截止时间
      var NowTime = new Date();
      var t = EndTime.getTime() - NowTime.getTime();
      //累加
      var d = Math.floor(t / 1000 / 60 / 60 / 24);
      var h = Math.floor((t / 1000 / 60 / 60) % 24);
      var m = Math.floor((t / 1000 / 60) % 60);
      var s = Math.floor((t / 1000) % 60);

      document.getElementById("t_d").innerHTML = d + "天";
      document.getElementById("t_h").innerHTML = h + "时";
      document.getElementById("t_m").innerHTML = m + "分";
      document.getElementById("t_s").innerHTML = s + "秒";
    },
    drawClock() {
var canvas=document.getElementById('canvas');
var context=canvas.getContext('2d');
context.save(); ///////////////////////////////////保存
context.translate(150,150);
var deg=2*Math.PI/12;    
//////////////////////////////////////////////////表盘
context.save();    
context.beginPath();    
for(var i=0;i<13;i++){
var x=Math.sin(i*deg);
var y=-Math.cos(i*deg);
context.lineTo(x*150,y*150);    
}
var c=context.createRadialGradient(0,0,0,0,0,130);
c.addColorStop(0,"#22f");
c.addColorStop(1,"#0ef")
context.fillStyle=c;
context.fill();
context.closePath();    
context.restore();    
//////////////////////////////////////////////////数字
context.save();
context.beginPath();
for(var i=1;i<13;i++){
var x1=Math.sin(i*deg);
var y1=-Math.cos(i*deg);
context.fillStyle="#fff";
context.font="bold 20px Calibri";
context.textAlign='center';
context.textBaseline='middle';
context.fillText(i,x1*120,y1*120);    
}
context.closePath();    
context.restore();    
//////////////////////////////////////////////////大刻度
context.save();
context.beginPath();    
for(var i=0;i<12;i++){
var x2=Math.sin(i*deg);
var y2=-Math.cos(i*deg);
context.moveTo(x2*148,y2*148);
context.lineTo(x2*135,y2*135);    
}    
context.strokeStyle='#fff';
context.lineWidth=4;
context.stroke();
context.closePath();
context.restore();    
//////////////////////////////////////////////////小刻度
context.save();
var deg1=2*Math.PI/60;
context.beginPath();    
for(var i=0;i<60;i++){
var x2=Math.sin(i*deg1);
var y2=-Math.cos(i*deg1);
context.moveTo(x2*146,y2*146);
context.lineTo(x2*140,y2*140);    
}    
context.strokeStyle='#fff';
context.lineWidth=2;
context.stroke();
context.closePath();    
context.restore();    
///////////////////////////////////////////////////文字
context.save();
context.strokeStyle="#fff";
context.font=' 34px sans-serif';
context.textAlign='center';
context.textBaseline='middle';
context.strokeText('canvas',0,65);    
context.restore();    
/////////////////////////////////////////////////new Date
var time=new Date();
var h=(time.getHours()%12)*2*Math.PI/12;
var m=time.getMinutes()*2*Math.PI/60;
var s=time.getSeconds()*2*Math.PI/60;
context.save();
context.rotate( h + m/12 + s/720) ;
context.beginPath();
context.moveTo(0,6);
context.lineTo(0,-85);
context.strokeStyle="#fff";
context.lineWidth=6;
context.stroke();
context.closePath();
context.restore();
//////////////////////////////////////////////分针
context.save();
context.rotate( m+s/60 ) ;
context.beginPath();
context.moveTo(0,8);
context.lineTo(0,-105);
context.strokeStyle="#fff";
context.lineWidth=4;
context.stroke();
context.closePath();
context.restore();
/////////////////////////////////////////////秒针
context.save();
context.rotate( s ) ;
context.beginPath();
context.moveTo(0,10);
context.lineTo(0,-120);
context.strokeStyle="#fff";
context.lineWidth=2;
context.stroke();
context.closePath();
context.restore();    
context.restore();/////////////////////////////栈出
/////////////////////////////计时器</p>
}
  },
  activated() {
    let that = this;
    that.begin1 = true
    console.log("activated……")
    var birthday = new Date(1996, 10, 4);
    var live = (new Date() - birthday) / 2592000000;
    var range = [0, live - 1];
    for (var i = 0; 30 > i; i++) {
      for (var j = 0; 30 > j; j++) {
        var current = 30 * i + j,
          canvas = document.getElementsByClassName("myLife")[0],
          ctx = canvas.getContext("2d");
        current >= range[0] && current <= range[1]
          ? (ctx.fillStyle = "#ccc")
          : (ctx.fillStyle = "#e96900"),
          ctx.fillRect(10 * j + 1, 10 * i + 1, 8, 8),
          (ctx.strokeStyle = "#000"),
          (ctx.lineWidth = 1),
          ctx.strokeRect(10 * j, 10 * i, 10, 10);
      }
    }
    setInterval(function () {
      if (that.begin1==true) {
        document.getElementsByClassName("im0now")[0].innerHTML = (
          100 -
          (new Date() - birthday) / 2592000000 / 9
        ).toFixed(9);
      }
    }, 300);
    setInterval(function(){
      if(that.begin1==true){
        that.drawClock()
        that.getRTime()
      }
    },1000);
  },
  deactivated() {
    let that = this;
    that.begin1 = false
   console.log("deactivated……")
  },
};
</script>

<style lang="less" scoped>
.wrap_t {
  color: #fff;
  text-align: center;
  background-color: slateblue;
  margin-top: 15px;
  margin-bottom: 15px;
  padding: 3px;
  padding-top: 5px;
  padding-bottom: 5px;
}
.wrap {
  .main {
    display: flex;
    justify-content: space-between;
    .clock {
      .clockM{
        height: 80%;
      }
      background-color: #666;
      width: 300px;
      height: 300px;
      .biaotis{
        margin: 0 auto;
        color: #fff;
        text-align: center;
      }
      #CountMsg{
        margin: 0 auto;
        color: #fff;
        text-align: center;
      }
    }
  }
}
</style>